<template>
	<view>
		<!-- tab -->
		<u-sticky>
			<view class="tabs w-100 bg-white">
				<view class="w-100 d-flex justify-content-between align-items-center p-10">
					<u-tabs class="tab-box" bg-color="#ffffff" :is-scroll="false" inactive-color="#999" name="name" :list="tabs" active-color="#616161" :current="current" @change="tabChange"></u-tabs>
					<view class="filtrate mr-20 text-color-grey" :class="filterCount>0?'filtrate-ing':''" @tap="filter">筛选{{filterCount>0?'·'+filterCount:''}}<u-icon class="ml-10" :name="filterIsShow?'arrow-up-fill':'arrow-down-fill'" size="20"></u-icon></view>
				</view>
				<view v-if="filterIsShow" class="w-100 bg-white filtrate-content">
					<scroll-view class="filter-scroll" scroll-y="true">
						<view class="filter-item text-color-grey">
							<view class="mb-20 font-weight-bold">发起人性别</view>
							<view class="tags">
								<view v-for="(item,index) in sexTags" :key="item.id" class="tag" :class="index==sexTagCurrent?'select':''" @tap="filterTagSex(index)">{{item.name}}</view>
							</view>
						</view>
						<view class="filter-item text-color-grey">
							<view class="mb-20 font-weight-bold">发起人身份</view>
							<view class="tags">
								<view class="tag" :class="identityTagCurrent==0?'select':''" @tap="filterTagIdentity('all')">全部</view>
								<view class="tag" v-for="(item,index) in initialize.identityTags" :class="index+1==identityTagCurrent?'select':''" :key="item.id" @tap="filterTagIdentity(index)">{{item.label}}</view>
							</view>
						</view>
					</scroll-view>
					<view class="w-100 d-flex justify-content-between p-20">
						<button class="filter-clear mr-30" type="default" @tap="filterClear">清除</button>
						<button class="filter-confirm" type="primary" @tap="filterConfirm">确认</button>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class='p-20'>
			<!-- 相册 -->
			<view>
				<fuzzy-location v-if="current==3" ref="fuzzyLocation" :currentCity="currentCity" @over="locationOver" @change="changeCity"></fuzzy-location>
				<post-album-waterfall :list="postAlbumList" :loadStatus="loadStatus"></post-album-waterfall>
			</view>
		</view>
		
		<!-- 遮照层 -->
		<view v-if="filterIsShow" class="popup-bg" catchtouchmove="true"></view>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import postAlbumWaterfall from '../../components/post-album-waterfall/post-album-waterfall.vue';
	import fuzzyLocation from '../../components/location/fuzzy-location.vue';
	export default {
		components: {
			postAlbumWaterfall,
			fuzzyLocation
		},
		data() {
			return {
				tabs: [{name:'关注',value:1},{name:'推荐',value:2},{name:'最新',value:3},{name:'同城',value:4}],
				loading:true,
				btnStyle: {
					color: "#fff",
					backgroundColor: '#efd234'
				},
				btnStyle2: {
					border: '1px solid #efd234',
					color: "#efd234"
				},
				background: {
					backgroundColor: 'unset'
				},
				current: 1,
				uuid: 0,
			
				user: {},
				userJson: "",
				postAlbumList:[],
				loadStatus: "loading",
				page: 1,
				filterIsShow:false,
				sexTags:[{name:'全部', value:0},{name:'男',value:1},{name:'女',value:2}],
				sexTagCurrent:0,
				identityTagCurrent:0,
				filterCount:0,
				selectCityValue:''
			};
		},
		computed:{
			...mapState(['initialize', 'hasLogin', 'userInfo', 'currentCity',]),
		},
		onLoad() {
			this.getAlbumList();	
		},
		onReachBottom() {
			if(this.loadStatus!='nomore') {
				this.page++;
				this.getAlbumList();
			}
		},
		methods: {
			async getAlbumList() {
				let params = {page:this.page,tab:this.tabs[this.current].value, currentCity:this.currentCity.value,selectCity:this.selectCityValue}
				if(this.filterCount>0){
					if(this.sexTagCurrent>0) {
						params.sex = this.sexTags[this.sexTagCurrent].value
					}
					if(this.identityTagCurrent>0) {
						params.identity = this.identityTags[this.identityTagCurrent-1].value
					}
				}
				this.loadStatus = 'loading';
				let res = await this.$api('album')
				this.postAlbumList = this.postAlbumList.concat(res.data.list);
				if (this.page >= res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			},	
			tabChange(index) {
				if(this.current==index) return;
				this.current = index;
				this.page = 1;
				this.loadStatus = 'loading';
				this.postAlbumList = [];
				
				if(index==3) {
					if(!this.currentCity.value) {
						this.$nextTick(()=>{
							this.$refs.fuzzyLocation.getFuzzyLocation();
						})
					}else{
						this.getAlbumList();
					}
				}else{
					this.getAlbumList();
				}
			},
			filter() {
				if(this.loadStatus!='loading') {
					this.filterIsShow = !this.filterIsShow;
				}
			},
			filterTagSex(current) {
				this.sexTagCurrent = current;
			},
			filterTagIdentity(current) {
				if(current=='all') current = -1;
				this.identityTagCurrent = current+1;
			},
			filterClear() {
				this.sexTagCurrent = 0;
				this.identityTagCurrent = 0;
				this.filterCount = 0;
				
				if(this.loadStatus!='loading') {
					this.postAlbumList = [];
					this.page = 1;
					this.loadStatus = 'loading'
					this.getAlbumList();
				}
			},
			filterConfirm() {
				this.filterCount = 0;
				this.filterIsShow = false;
				if(this.sexTagCurrent) this.filterCount++;
				if(this.identityTagCurrent) this.filterCount++
				
				if(this.loadStatus!='loading') {
					this.postAlbumList = [];
					this.page = 1;
					this.loadStatus = 'loading'
					this.getAlbumList();
				}
			},
			locationOver() {
				this.postAlbumList = [];
				this.page = 1;
				this.loadStatus = 'loading'
				this.getAlbumList();
			},
			changeCity(val) {
				if(this.selectCityValue != val) {
					this.selectCityValue = val;
					this.postAlbumList = [];
					this.page = 1;
					this.loadStatus = 'loading'
					this.getAlbumList();
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
	.tabs {
		position: relative;
		z-index: 99;
		padding: 10rpx 0;
	}
	.tab-box {
		width: 50%;
	}
	.filtrate {
		background-color: #F1F1F1;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
	.filtrate-ing {
		background-color: rgba(238,209,70, 0.6);
	}
	.filtrate-content {
		position: absolute;
		z-index:99;
	}
	.filter-scroll {
		height: 600rpx;
	}
	.filter-item {
		border-bottom: 2rpx solid #F5F5F5;
		padding: 30rpx 30rpx;
	}
	.filter-clear {
		width: 30%;
	}
	.filter-confirm {
		width: 70%;
	}
	.popup-bg{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		background-color: rgba(1,1,1,0.3);
	}
	.tags {
		display: flex;
		position: relative;
		font-size: 0;
		font-family: Helvetica;
		flex-flow: wrap; 
	}
	.tags .tag {
		width: 150rpx;
		position: relative;
		display: inline-block;
		padding: 10rpx 0;
		color: #666;
		font-size: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #F1F1F1;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}
	.tags .tag.select {
		background-color: rgb(239, 210, 52);
	}
</style>
